import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../../routes/xin_he_routes.dart';
import '../../../../utils/xh_styles.dart';
import '../../../../utils/xin_he_image.dart';
import '../../../home/views/xin_he_tab_custom_indicator.dart';
import '../../../shopping_car/models/xin_he_goods_model.dart';
import 'xin_he_group_purchase_orders_logic.dart';

class XinHeGroupPurchaseOrdersPage extends StatelessWidget {
  XinHeGroupPurchaseOrdersPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeGroupPurchaseOrdersLogic());
  final state = Get.find<XinHeGroupPurchaseOrdersLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: const EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ),
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        title: Text('订单',style: TextStyle(color:XinHeColor('##222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: SizedBox(
        width: Get.width,
        height: Get.height-Get.mediaQuery.padding.top-44,
        child: Column(
          children: [
            _tabsView(),
            Expanded(
              child: ListView.builder(
                  itemCount: 10,
                  itemBuilder: (ctx,index){
                    return _itemsView();
                  }),
            )
          ],
        ),
      ),
    );
  }

  Widget _tabsView() {
    return  Container(
      height: 44,
      color: Colors.white,
      margin: const EdgeInsets.symmetric(horizontal: 0),
      child: TabBar(
          onTap: (index){
            logic.currentIndex.value = index;
          },
          controller: logic.tabsTabController,
          labelColor: XinHeColor('#2B3131'),
          unselectedLabelColor: XinHeColor('#909696'),
          labelStyle: const TextStyle(fontSize: 15,fontWeight: FontWeight.w600 ),
          unselectedLabelStyle: const TextStyle(fontSize: 13,fontWeight: FontWeight.w400 ),
          indicator: RoundedTabIndicator(width: 29,height: 2),
          indicatorPadding: const EdgeInsets.only(top: 8),
          // labelPadding: EdgeInsets.symmetric(horizontal: logic.getPaddingWidth()) ,
          tabs: logic.tabList.map((e) => Container(
            height: 44,
            alignment: Alignment.center,
            child: Text(e,softWrap: false,),
          )).toList()

      ),
    );
  }

  Widget _itemsView() {
    return Container(
      height: 247,
      margin: const EdgeInsets.symmetric(horizontal: 15).copyWith(top: 15),
      padding: const EdgeInsets.symmetric(horizontal: 15).copyWith(top: 15),
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(15),color: Colors.white),
      child: Column(children: [

        Row(children: [
          const XinHeAssetImage('assets/images/cart/cart_unselected.png',width: 18,height: 18,),
          const SizedBox(width: 5,),
          Text('欧若拉',style: TextStyle(color: XinHeColor('#282C2C'),fontSize: 13,fontWeight: FontWeight.w500),),
          const SizedBox(width: 3,),
          const XinHeAssetImage('assets/images/cart/pay_arrow.png',width: 6,height: 10,),
          const Spacer(),
          Text('拼团成功',style: TextStyle(color: XinHeStyle.mainGreenColor,fontSize: 13,fontWeight: FontWeight.w600),),


        ],),

        _goodsItemView(XinHeGoodsModel(),0),

        SizedBox(height: 10,),
        SizedBox(
          height: 18,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              RichText(text: TextSpan(children: [
                TextSpan(text:'合计',style: TextStyle(color: XinHeColor('#555555'),fontSize: 12)),
                TextSpan(text: '￥',style: TextStyle(color: XinHeColor('#E33F3F'),fontSize: 12)),
                TextSpan(text: '1500.80',style: TextStyle(color: XinHeColor('#E33F3F'),fontSize: 15))
              ])),
            ],),
        ),

        SizedBox(height: 10,),
        Row(children: [
          Spacer(),
          GestureDetector(
            onTap: (){
              Get.toNamed(XinHeRoutes.groupPurchaseOrdersDetail);
            },
            child: Container(
              height: 30,
              width: 75,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(15),
                  border: Border.all(color: XinHeColor('#B9B9B9'),width: 0.5)
              ),
              child: Text('订单详情',style: TextStyle(color: XinHeColor('#666666'),fontSize: 14),strutStyle: const StrutStyle(forceStrutHeight: true)),
            ),
          ),
          const SizedBox(width: 10,),
          GestureDetector(
            onTap: (){
              Get.toNamed(XinHeRoutes.paySuccess);
            },
            child: Container(
              height: 30,
              width: 75,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                gradient: LinearGradient(colors: [ XinHeColor('##F89A30'), XinHeColor('#E84128')]),
                borderRadius: BorderRadius.circular(15),
              ),
              child: const Text('立即支付',style: TextStyle(color: Colors.white,fontSize: 14),strutStyle: StrutStyle(forceStrutHeight: true),),
            ),
          ),

        ],)





      ],),);
  }

  Widget _goodsItemView(XinHeGoodsModel model,int index){
    return Stack(
      children: [
        Container(
          color: Colors.white,
          width: Get.width-30,
          height: 120,

          child:  Row(
            children: [

              const Padding(
                padding:  EdgeInsets.only(left: 0,top: 15,right: 15,bottom: 15),
                child: XinHeAssetImage('assets/images/home/tmp.png',width: 80,height: 80,fit: BoxFit.fill,),
              ),

              ///描述与价格数量
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  SizedBox(
                      width:Get.width-30-80-30-15,
                      child: Text('一级冷榨有机野山茶籽油500ML级冷榨有机野iii',maxLines: 2,softWrap: true,style: TextStyle(color: XinHeColor('#222222'),fontSize: 14,fontWeight: FontWeight.bold),)
                  ),
                  const SizedBox(height: 20,),



                  SizedBox(
                    width:Get.width-30-80-30-15,
                    height: 23,
                    child: Row(
                      children: [

                        RichText(
                            text: TextSpan(children: [
                              ///￥
                              TextSpan(
                                text: '￥',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 9,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                              ///
                              TextSpan(
                                text: '${model.price}',
                                style: TextStyle(
                                  color: XinHeColor('#E84128'),
                                  fontSize: 16,
                                  fontWeight: FontWeight.w500,
                                ),
                              ),

                            ]
                            )),
                        const Spacer(),

                        Text('x${model.count}',style: TextStyle(color: XinHeColor('#8B9191'), fontSize: 12, fontWeight: FontWeight.w500,)
                        ),
                        const SizedBox(width: 0,)

                      ],
                    ),
                  )

                ],)


            ],
          ),
        ),

        Positioned(
          bottom: 0,
          right: 15,
          child: Container(
            width: Get.width-30-30,
            color: XinHeColor('#E7EEEE'),
            height: 0.5,),
        )

      ],
    );
  }

}
